<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <meta name="Keywords" content="Sunny">
  <meta name="Description" content="Sunny">
  <link rel="stylesheet" href="/static/css/base.css">
  <link rel="stylesheet" href="/static/css/iconfont.css">
  <link rel="stylesheet" href="/static/css/reg.css">
  <style rel="stylesheet">
    .login-message {
      display: block;
      line-height: 30px;
      font-size: 14px;
      color: red;
      text-align: left;
      width: 340px;
      margin: 0 auto;
    }
    .message-error {
      color: #ea5d5f;
      font-size: 12px;
      left: 0;
    }
    .message-info {
      color: gray;
      font-size: 12px;
      left: 0;
    }
  </style>
</head>
<body>
<div id="ajax-hook"></div>
<div class="wrap">
  <div class="wpn">
    <div class="form-data pos">
      <a href=""><img src="/static/img/register-logo.png" class="head-logo"></a>
      <div class="change-login">
        <p name="account" class="account_number on">注册</p>
        <p name="mobile" class="message">绑定已有账号</p>
      </div>
      <div class="login-message">
        <span class="message-error" th:text="${errorMsg}"></span>
      </div>
      <div class="form1">
        <div class="login-message">
          <span class="message-info">
            注册后，可继续使用第三方登录到Sunny新账号
          </span>
        </div>
        <form id="register" action="/register" method="post">
          <p class="p-input pos">
            <label for="username">用户名</label>
            <input type="text" id="username" autocomplete="off">
            <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
          </p>
          <p class="p-input pos">
            <label for="tel">手机号</label>
            <input type="number" id="tel" autocomplete="off">
            <span class="tel-warn tel-err hide"><em></em><i class="icon-warn"></i></span>
          </p>
          <p class="p-input pos" id="sendcode">
            <label for="veri-code">输入验证码</label>
            <input type="number" id="veri-code">
            <a href="javascript:;" class="send">发送验证码</a>
            <span class="time hide"><em>120</em>s</span>
            <span class="error hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
          </p>
          <p class="p-input pos hide" id="pwd">
            <label for="passport">输入密码</label>
            <input type="password" style="display: none"/>
            <input type="password" id="passport">
            <span class="tel-warn pwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
          </p>
          <p class="p-input pos hide" id="confirmpwd">
            <label for="passport2">确认密码</label>
            <input type="password" style="position:absolute;top:-998px"/>
            <input type="password" id="passport2">
            <span class="tel-warn confirmpwd-err hide"><em></em><i class="icon-warn" style="margin-left: 5px"></i></span>
          </p>
          <div class="reg_checkboxline pos">
            <span class="z"><i class="icon-ok-sign boxcol" nullmsg="请同意!"></i></span>
            <input type="hidden" name="agree" value="1">
            <div class="Validform_checktip"></div>
            <p>我已阅读并接受 <a href="#" target="_brack">《Sunny注册协议说明》</a></p>
          </div>
          <button id="register-btn" class="lang-btn">注册并绑定</button>
        </form>
      </div>
      <div class="form2 hide">
        <div class="login-message">
          <span class="message-info">
            绑定后，您可以通过第三方账号登录到绑定的Sunny账号
          </span>
        </div>
        <form id="bind" action="/bind" method="post">
          <p class="p-input pos">
            <input type="text" id="num" name="username" placeholder="请输入用户名/手机号" maxlength="30">
          </p>
          <p class="p-input pos">
            <input type="password" id="pass" name="password" maxlength="30" placeholder="请输入密码">
          </p>
          <button id="bind-btn" class="lang-btn">登录并绑定</button>
        </form>
      </div>

      <p class="right">Powered by lyyzoo © 2018</p>
    </div>
  </div>
</div>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/agree.js"></script>
<script src="/static/js/bind.js"></script>
</body>
</html>